{% extends "../blog/base.html" %}

{% block main %}
    <div class="row">
        <div id="vmaig-content" class="col-md-8 col-lg-9">
            <div id="tool" class="well clearfix">
                <div class="tags">
                    <div class="tag-list" style="float:left">
                        <label class="active">
                            全部
                            <input type="radio" name="category" value="all" style="display:none"></input>
                        </label>
                        {% for category in category_list %}
                            <label>
                                {{ category.name }}
                                <input type="radio" name="category" value="{{ category.name }}" style="display:none"></input>
                            </label>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="well">
                <div class="sort">
                    <label>
                        <input type="radio" name="sort" value="time" checked="checked"> 按时间排序
                    </label>
                    <label>
                        <input type="radio" name="sort" value="recommend"> 按热度排序
                    </label>
                    <label>
                        <input type="radio" name="sort" value="comment"> 按评论排序
                    </label>
                </div>

                <div id="all-post-list">
                    {% if article_list %}
                        {% with post_list=article_list %}
                            {% for post in post_list %}
                                {% include "../blog/include/all_post.html" %}
                            {% endfor %}
                        {% endwith %}
                    {% endif %}
                </div>
                <div id="loading" style="height:100px;line-height:100px;text-align:center;display:none;">
                    <img src="http://vmaig.qiniudn.com/loading.gif" alt="">
                </div>


            </div>
            <button id="all-post-more" type="button" class="btn btn-vmaig" value="all" style="width:100%">
                加载更多
                <span class="glyphicon glyphicon-menu-down"></span>
            </button>

        </div>

        <div id="vmaig-side" class="col-md-4 col-lg-3 hidden-xs">
            {% include "../blog/widgets/tags_cloud.html" %}
            {% include "../blog/widgets/search.html" %}
            {% include "../blog/widgets/hotest_posts.html" %}
            {% include "../comments/latest_comments.html" %}
        </div>
    </div>

{% endblock %}

{% block js %}
    <script language="javascript" type="text/javascript">

        var start = 0;
        var end = parseInt({{PAGE_NUM}});

        $("input[name='category']").click(function () {
            start = 0;
            end = parseInt({{PAGE_NUM}});
            $("input[name='category']").parent().removeClass("active");
            $("#all-post-more").hide();
            $("#loading").show();

            $("#all-post-list").empty();
            $(this).parent().addClass("active");
            $("#all-post-more").val($(this).val());
            $.ajax({
                type: "POST",
                url: "/all/",
                data: {"val": $(this).attr("value"), "sort": $("input[name='sort']:checked").val(), "start": start, "end": end},
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
                },
                success: function (data, textStatus) {
                    $("#loading").hide();
                    $('#all-post-list').append(data["html"]);
                    if (data["isend"]) {
                        $("#all-post-more").hide();
                    } else {
                        $("#all-post-more")
                        show();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);

                }
            });
        });

        $("input[name='sort']").click(function () {
            start = 0;
            end = parseInt({{PAGE_NUM}});
            $("#all-post-more").hide();
            $("#loading").show();

            $("#all-post-list").empty();
            $.ajax({
                type: "POST",
                url: "/all/",
                data: {"val": $("label.active input").val(), "sort": $("input[name='sort']:checked").val(), "start": start, "end": end},
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
                },
                success: function (data, textStatus) {
                    $("#loading").hide();
                    $('#all-post-list').append(data["html"]);
                    if (data["isend"]) {
                        $("#all-post-more").hide();
                    } else {
                        $("#all-post-more").show();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            });

        });


        $("#all-post-more").click(function () {
            start = end;
            end += 5;
            $("#loading")[0].style.display = "block";
            $.ajax({
                type: "POST",
                url: "/all/",
                data: {"val": $(this).attr("value"), "sort": $("input[name='sort']:checked").val(), "start": start, "end": end},
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
                },
                success: function (data, textStatus) {
                    $("#loading")[0].style.display = "none";
                    $("#all-post-more")[0].style.display = "none";
                    $('#all-post-list').append(data["html"]);

                    if (data["isend"]) {
                        $("#all-post-more")[0].style.display = "none";
                    } else {
                        $("#all-post-more")[0].style.display = "block";
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        });

    </script>
{% endblock %}
